@import '../../static/style/common.sass'
@import '../../static/style/color.sass'
@import '../../static/style/font_size.sass'
body
    background: $BODY_color
    min-height: 100%
    height: 100%


    .register-button
        width: 100%
        height: auto
        padding: 10px 0
        background: $main_color !important
        border-color: $main_color !important
        border-radius: 30px
        &:hover
            background: $main_color
            border-color: $main_color
    header
        background: $main_color

    // header -- top
    .header-content
        width: 100%
        margin: 0 auto
        zoom: 1
        &:after
            width: 100%
            display: block
            content: ' '
            clear: both
    .logo-img
        background: $FFF_color
        width: 400px
        height: 100px
        text-align: right
        float: left
        img
            width: 240px

    // nav --- list
    .nav-list
        float: right
        width: calc(100% - 400px)
        box-sizing: border-box
        ul
            list-style: none
            padding: 0 0 0 30px
            margin: 0

            li
                float: left
                padding: 10px 20px
                line-height: 90px
                box-sizing: border-box
                height: 100px
                a
                    color: $FFF_color
                    font-size: 18px

    // ant --- tabs ---list
    .ant-tabs-bar
            margin: 0 0 10px 0 !important

    .register_container_wrapper
        .ant-tabs-nav
            width: 300px !important
            padding: 15px 0 0 0!important
            left: 50%
            transform: translate(-50%, 0)


            .ant-tabs-ink-bar
                background-color: $main_color
                border-radius: 4px
            .ant-tabs-tab
                &:hover
                    color: $color_333
            .ant-tabs-tab-active
                color: $color_333

    // content --- list
    .content

        .swiper-container
            width: 100%
            height: calc(100% - 100px)
            position: absolute

        .box1
            height: 100%
            background-size: 100% auto
            -moz-background-size: 100% auto
            -webkit-background-size: 100% auto
            // background-image: url(../../Image/bg4.jpg)


        .box2
            height: 100%
            background-size: 100% auto
            -moz-background-size: 100% auto
            -webkit-background-size: 100% auto
            // background-image: url(../../Image/bg2.jpg)

        .box3
            height: 100%
            background-size: 100% auto
            -moz-background-size: 100% auto
            -webkit-background-size: 100% auto
            // background-image: url(../../Image/bg3.jpg)

        .box4
            height: 100%
            background-size: 100% auto
            -moz-background-size: 100% auto
            -webkit-background-size: 100% auto
            // background-image: url(../../Image/bg1.jpg)

        // 表单内容区域样式

        .form-content
            position: absolute
            background: $FFF_color
            top: 22%
            right: 70px
            z-index: 999
            border-radius: 8px
            width: 422px
            &:after
                width: calc(100% + 30px)
                position: absolute
                background: rgba(15, 15, 15, .2)
                height: calc(100% + 0px)
                content: ' '
                border-radius: 10px
                top: 20px
                left: -15px
                z-index: 998

            .ant-tabs
                z-index: 9999
                background: $FFF_color
                border-radius: 8px
                padding-bottom: 14px


            .ant-tabs-nav-wrap
                padding: 0 10px
                margin: 0 10px

            .common-form
                padding: 0 12px

                .user-input-default
                    input
                        padding-left: 80px

                .user-label
                    display: inline-block
                    width: 80px
                    padding-left: 8px

                .login-submit
                    width: 100%
                    background: $main_color !important
                    border-color: $main_color !important
                    padding: 10px 0
                    height: auto
                    border-radius: 30px

                .ant-form-item
                    margin-bottom: 10px
                .link-register
                    line-height: 2
                    padding-top: 6px
                    margin: 0
                    font-size: $font_13
                    span
                        padding-left: 4px
                        color: $main_color
                        cursor: pointer

            .qrcode-scan
                width: 100%
                padding: 5px 20px
                text-align: center
                .scan-img
                    height: 220px
                    img
                        height: 100%

            .radio-list
                li
                    display: flex
                    p
                        text-align: justify
                        margin: 0
                        padding-bottom: 6px
                    .ant-radio-inner
                        width: 15px
                        height: 15px
                        border-color: $border_color
                        box-sizing: border-box
                        &:after
                            width: 9px
                            height: 9px
                            top: 50% !important
                            left: 50% !important
                            margin-left: -31%
                            margin-top: -31%
                            background-color: $pointer_color

                    &:last-child
                        span
                            display: block
                            width: 24px
                            min-width: 24px
                        p
                            line-height: 1.6
                            text-align: justify

        .swiper-pagination-bullet
            background: none
            border: 2px solid $FFF_color
            width: 12px
            height: 12px
            opacity: 1
        .swiper-pagination-bullet-active
            background: $FFF_color
            opacity: 1

        .swiper-slide
            position: relative
            .position-swiper
                position: absolute
                width: 500px
                top: 30%
                img
                    width: 100%
        .customer-pointer
            left: -16%
            bottom: 8%



    .image-code
        width: calc(100% - 100px)
        float: left
    .image-validate
        width: 92px
        text-align: center
        float: left
        height: 38px
        margin-left: 8px
        box-sizing: border-box
        border-radius: 4px
        overflow: hidden
        img
            vertical-align: top
            width: 100%
            height: 100%

    .next-button-wrapper
        margin-bottom: 0
        .ant-form-item-children
            width: 100%
            display: flex
        .register-reset
            width: 50%
            margin-right: 10px
            box-sizing: border-box
            background: $FFF_color
            border-color: $main_color
            color: $main_color
            padding: 10px 0
            height: auto
        .register-step-submit
            width: 50%
            margin-left: 10px
            box-sizing: border-box
            background: $main_color
            border-color: $main_color
            padding: 10px 0
            height: auto

.clear-fix
    zoom: 1
    &:after
        display: block
        width: 100%
        content: ' '
        clear: both



.user-modal-default
    .ant-input
        padding-left: 90px !important

.send-msg-button
    background: $main_color
    color: $FFF_color
    line-height: 31px
    cursor: pointer

.register_container_wrapper

    .ant-btn-primary
        &:active
            background: $main_color
            border-color: $main_color
        &:hover
            background: $main_color
            border-color: $main_color
        &:focus
            background: $main_color
            border-color: $main_color

.register_container_wrapper
    .login_register
        .register-button
            width: 100%
            height: auto
            padding: 10px 0
            background: $main_color !important
            border-color: $main_color !important
            border-radius: 30px
            &:active
                background: $main_color !important
                border-color: $main_color !important
            &:hover
                background: $main_color !important
                border-color: $main_color !important
            &:focus
                background: $main_color !important
                border-color: $main_color !important

        .send-msg-button
            background: $main_color !important
            color: $FFF_color !important
            line-height: 31px
            cursor: pointer

        .register-reset
            width: 50%
            margin-right: 10px
            box-sizing: border-box
            background: $FFF_color !important
            border-color: $main_color !important
            color: $main_color !important
            padding: 10px 0
            height: auto
        .register-step-submit
            width: 50%
            margin-left: 10px
            box-sizing: border-box
            background: $main_color !important
            border-color: $main_color !important
            padding: 10px 0
            height: auto
            &:active
                background: $main_color !important
                border-color: $main_color !important
            &:hover
                background: $main_color !important
                border-color: $main_color !important
            &:focus
                background: $main_color !important
                border-color: $main_color !important

